<template>
   <div class="login">
      <div class="box">
         <van-field v-model="username" label="用户名" placeholder="输入账号" />
         <van-field v-model="password" label="密码" placeholder="输入密码" />
         <van-button type="primary" @click="login" class="button1">登陆</van-button>
         <van-button type="primary" @click="toRegister" class="button2">注册</van-button>
      </div>
   </div>
</template>


<script setup>
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router'
import { login as logina } from "../api/user"
import { Notify,Toast  } from 'vant'
const router = useRouter()
let username = ref("");
let password = ref("");
let token = ref("");
async function login() {
   let res = await logina(username.value, password.value)
   console.log(res);
   if (res.data.code === 200) {
      token.value = res.data.data
      Toast.success(res.data.msg);
      sessionStorage.setItem("token", token.value)
      router.push("/home")
   } else {
      Toast.fail(res.data.msg);
   }

}
function toRegister() {
   router.push("/register");
}
</script>


<style lang='less' scoped>
.login {
   width: 100vw;
   height: 100vh;
   background-image: url("../static/background/3.jpg");
   background-size: cover;
   position: relative;

   .box {
      position: absolute;
      //right: 30rem;
      top: 3.20rem;
      color: #fff;
      font-weight: 700;
      width: 3.85rem;
      font-size: 0.30rem;

      .button1 {
         position: absolute;
         margin-top: 0.40rem;
         border-radius: 15%;
         width: 0.80rem;
         height: 0.40rem;
         left: 0.40rem;
         background-color: rgba(124, 197, 45, 0.716);
      }

      .button2 {
         position: absolute;
         margin-top: 0.40rem;
         border-radius: 15%;
         width: 0.80rem;
         height: 0.40rem;
         left: 2.20rem;
         background-color: rgba(230, 232, 229, 0.716);
      }
   }
}
</style>